<!DOCTYPE html>
<html lang="zh-CN" class="scroll-smooth">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>激光位移传感器测量</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@latest/dist/tabler-icons.min.css" rel="stylesheet"/>
  <script>
    tailwind.config = {
      darkMode: 'class',
      theme: {
        extend: {
          colors: {
            primary: '#3b82f6',
            'primary-dark': '#2563eb',
            'gray-light': '#f3f4f6',
            'gray-dark': '#1f2937',
          },
          transitionProperty: {
            'height': 'height'
          }
        }
      }
    };
  </script>
  <style>
    @keyframes fadeInUp {
      from {
        opacity: 0;
        transform: translateY(20px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
    .animate-fade-in-up {
      animation: fadeInUp 0.6s ease-out forwards;
    }
    .card-hover-effect {
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .card-hover-effect:hover {
      @apply shadow-xl scale-[1.02] border-primary;
    }
    .btn-hover-effect {
      transition: all 0.2s ease;
    }
    .btn-hover-effect:hover {
      @apply scale-105 brightness-110;
    }
    .progress-ring {
      stroke-dasharray: 283;
      stroke-dashoffset: 283;
      transition: stroke-dashoffset 0.3s ease;
    }
  </style>
</head>
<body class="bg-gray-light text-gray-800 dark:bg-gray-dark dark:text-gray-200 min-h-screen font-sans antialiased transition-colors duration-300">

<header class="bg-white dark:bg-gray-900 shadow-sm border-b border-gray-200 dark:border-gray-700 sticky top-0 z-50 backdrop-blur-lg bg-opacity-90 dark:bg-opacity-90">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4 flex justify-between items-center">
    <div class="flex items-center space-x-3">
      <div class="text-primary dark:text-primary-dark">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M12 2v4m0 12v4M4.93 4.93l2.83 2.83m8.48 8.48l2.83 2.83M4.93 19.07l2.83-2.83m8.48-8.48l2.83-2.83M7 12a5 5 0 1110 0 5 5 0 01-10 0z"/>
        </svg>
      </div>
      <h1 class="text-2xl font-bold"><span class="text-primary dark:text-primary-dark">激光位移传感器测量</span> 控制仪表盘</h1>
    </div>
    <button id="theme-toggle" aria-label="切换主题" class="p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-primary">
      <span id="light-icon" class="ti ti-sun hidden"></span>
      <span id="dark-icon" class="ti ti-moon"></span>
    </button>
  </div>
</header>

<main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">

  <section class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8 animate-fade-in-up">
    <div class="bg-white dark:bg-gray-800 p-6 rounded-xl shadow-md card-hover-effect border border-transparent transition-colors duration-300">
      <div class="flex items-center">
        <div class="p-3 rounded-full bg-blue-100 dark:bg-blue-900 text-primary dark:text-primary-dark mr-4">
          <span class="ti ti-gauge ti-lg"></span>
        </div>
        <div>
          <p class="text-sm font-medium text-gray-600 dark:text-gray-300">当前状态</p>
          <p id="system-status" class="text-lg font-semibold text-gray-800 dark:text-gray-100">待机</p>
        </div>
      </div>
    </div>

    <div class="bg-white dark:bg-gray-800 p-6 rounded-xl shadow-md card-hover-effect border border-transparent transition-colors duration-300">
      <div class="flex items-center">
        <div class="p-3 rounded-full bg-green-100 dark:bg-green-900 text-green-600 dark:text-green-300 mr-4">
          <span class="ti ti-device-analytics ti-lg"></span>
        </div>
        <div>
          <p class="text-sm font-medium text-gray-600 dark:text-gray-300">采集点数</p>
          <p id="data-count" class="text-lg font-semibold text-gray-800 dark:text-gray-100">0</p>
        </div>
      </div>
    </div>

    <div class="bg-white dark:bg-gray-800 p-6 rounded-xl shadow-md card-hover-effect border border-transparent transition-colors duration-300">
      <div class="flex items-center">
        <div class="p-3 rounded-full bg-purple-100 dark:bg-purple-900 text-purple-600 dark:text-purple-300 mr-4">
          <span class="ti ti-ruler-2 ti-lg"></span>
        </div>
        <div>
          <p class="text-sm font-medium text-gray-600 dark:text-gray-300">实时距离</p>
          <p id="real-distance" class="text-lg font-semibold text-gray-800 dark:text-gray-100">--.----- mm</p>
        </div>
      </div>
    </div>

    <div class="bg-white dark:bg-gray-800 p-6 rounded-xl shadow-md card-hover-effect border border-transparent transition-colors duration-300">
      <div class="flex items-center">
        <div class="p-3 rounded-full bg-orange-100 dark:bg-orange-900 text-orange-600 dark:text-orange-300 mr-4">
          <span class="ti ti-arrows-sort ti-lg"></span>
        </div>
        <div>
          <p class="text-sm font-medium text-gray-600 dark:text-gray-300">当前角度</p>
          <p id="current-angle" class="text-lg font-semibold text-gray-800 dark:text-gray-100">--.---- °</p>
        </div>
      </div>
    </div>
  </section>

  <section class="bg-white dark:bg-gray-800 rounded-xl shadow-md p-6 mb-8 card-hover-effect border border-transparent transition-colors duration-300 animate-fade-in-up" style="animation-delay: 0.1s">
    <h2 class="text-xl font-semibold mb-6 flex items-center">
      <span class="ti ti-player-play-filled mr-2 text-primary"></span>
      控制操作
    </h2>
    <div class="grid grid-cols-2 md:grid-cols-5 gap-4">
      <button id="btn-start" class="btn-hover-effect bg-primary hover:bg-primary-dark text-white py-3 px-4 rounded-lg font-medium transition-all duration-200 flex flex-col items-center justify-center shadow-md hover:shadow-lg">
        <span class="ti ti-playstation-square ti-lg mb-1"></span>
        开始测量
      </button>
      <button id="btn-stop" class="btn-hover-effect bg-red-500 hover:bg-red-600 text-white py-3 px-4 rounded-lg font-medium transition-all duration-200 flex flex-col items-center justify-center shadow-md hover:shadow-lg">
        <span class="ti ti-square ti-lg mb-1"></span>
        停止采集
      </button>
      <button id="btn-emergency" class="btn-hover-effect bg-red-700 hover:bg-red-800 text-white py-3 px-4 rounded-lg font-medium transition-all duration-200 flex flex-col items-center justify-center shadow-md hover:shadow-lg">
        <span class="ti ti-alert-octagon ti-lg mb-1"></span>
        急停
      </button>
      <button id="btn-reset" class="btn-hover-effect bg-gray-500 hover:bg-gray-600 text-white py-3 px-4 rounded-lg font-medium transition-all duration-200 flex flex-col items-center justify-center shadow-md hover:shadow-lg">
        <span class="ti ti-refresh ti-lg mb-1"></span>
        复位
      </button>
      <button id="btn-settings" class="btn-hover-effect bg-indigo-500 hover:bg-indigo-600 text-white py-3 px-4 rounded-lg font-medium transition-all duration-200 flex flex-col items-center justify-center shadow-md hover:shadow-lg">
        <span class="ti ti-settings ti-lg mb-1"></span>
        参数设置
      </button>
    </div>
  </section>

  <div id="settings-modal" class="fixed inset-0 bg-black bg-opacity-50 hidden flex items-center justify-center p-4 z-50">
    <div class="bg-white dark:bg-gray-800 rounded-xl shadow-xl max-w-md w-full p-6 animate-fade-in-up border border-gray-200 dark:border-gray-700">
      <h3 class="text-xl font-semibold mb-4 flex items-center">
        <span class="ti ti-settings mr-2 text-primary"></span>
        测量参数设置
      </h3>
      <form id="settings-form">
        <div class="space-y-4">
          <div>
            <label for="port" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">串口端口</label>
            <input type="text" id="port" name="port" value="COM3" required class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-primary focus:border-primary dark:bg-gray-700 dark:text-white"/>
          </div>
          <div>
            <label for="baudrate" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">波特率</label>
            <select id="baudrate" name="baudrate" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-primary focus:border-primary dark:bg-gray-700 dark:text-white">
              <option>9600</option>
              <option>19200</option>
              <option>38400</option>
              <option selected>115200</option>
            </select>
          </div>
          <div>
            <label for="stepper-cycles" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">步进电机圈数</label>
            <input type="number" id="stepper-cycles" name="stepper_cycles" value="2" step="0.5" min="-10" max="10" required class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-primary focus:border-primary dark:bg-gray-700 dark:text-white"/>
          </div>
          <div>
            <label for="sample-interval" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">采样间隔 (秒)</label>
            <input type="number" id="sample-interval" name="interval" value="0.05" step="0.01" min="0.01" max="1" required class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-primary focus:border-primary dark:bg-gray-700 dark:text-white"/>
          </div>
        </div>
        <div class="flex space-x-3 mt-6">
          <button type="submit" class="flex-1 bg-primary hover:bg-primary-dark text-white py-2 px-4 rounded-lg font-medium transition-colors duration-200">保存设置（连接设备）</button>
          <button type="button" id="close-modal" class="flex-1 bg-gray-300 hover:bg-gray-400 dark:bg-gray-600 dark:hover:bg-gray-500 text-gray-800 dark:text-white py-2 px-4 rounded-lg font-medium transition-colors duration-200">取消</button>
        </div>
      </form>
    </div>
  </div>

  <section class="bg-white dark:bg-gray-800 rounded-xl shadow-md p-6 mb-8 card-hover-effect border border-transparent transition-colors duration-300 animate-fade-in-up" style="animation-delay: 0.2s">
    <h2 class="text-xl font-semibold mb-6 flex items-center">
      <span class="ti ti-chart-line ti-lg mr-2 text-primary"></span>
      实时测量数据
    </h2>
    <div class="relative h-80 w-full bg-gray-50 dark:bg-gray-900 rounded-lg overflow-hidden">
      <canvas id="data-chart" class="absolute inset-0 w-full h-full"></canvas>
      <div id="chart-placeholder" class="absolute inset-0 flex items-center justify-center text-gray-500 dark:text-gray-400">
        <div class="text-center">
          <span class="ti ti-chart-line ti-4x opacity-50"></span>
          <p class="mt-2">请先连接设备并开始测量...</p>
        </div>
      </div>
    </div>
  </section>

  <section class="bg-white dark:bg-gray-800 rounded-xl shadow-md p-6 animate-fade-in-up" style="animation-delay: 0.3s">
    <h2 class="text-xl font-semibold mb-6 flex items-center">
      <span class="ti ti-download ti-lg mr-2 text-primary"></span>
      数据管理
    </h2>
    <button id="btn-export" disabled class="btn-hover-effect bg-green-600 hover:bg-green-700 text-white py-3 px-6 rounded-lg font-medium transition-all duration-200 flex items-center shadow-md hover:shadow-lg opacity-70 cursor-not-allowed" title="请先完成一次测量">
      <span class="ti ti-file-export mr-2"></span>
      导出累积CSV数据
    </button>
  </section>

</main>

<footer class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6 text-center text-sm text-gray-500 dark:text-gray-400">
  激光位移传感器测量系统 © <span id="year">2025</span>
</footer>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
  document.getElementById('year').textContent = new Date().getFullYear();

  // 主题切换逻辑
  const themeToggle = document.getElementById('theme-toggle');
  const lightIcon = document.getElementById('light-icon');
  const darkIcon = document.getElementById('dark-icon');

  const savedTheme = localStorage.getItem('theme') || (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
  if (savedTheme === 'dark') {
    document.documentElement.classList.add('dark');
    lightIcon.classList.add('hidden');
    darkIcon.classList.remove('hidden');
  } else {
    document.documentElement.classList.remove('dark');
    lightIcon.classList.remove('hidden');
    darkIcon.classList.add('hidden');
  }

  themeToggle.addEventListener('click', () => {
    if (document.documentElement.classList.contains('dark')) {
      document.documentElement.classList.remove('dark');
      localStorage.setItem('theme', 'light');
      lightIcon.classList.remove('hidden');
      darkIcon.classList.add('hidden');
    } else {
      document.documentElement.classList.add('dark');
      localStorage.setItem('theme', 'dark');
      lightIcon.classList.add('hidden');
      darkIcon.classList.remove('hidden');
    }
  });

  // API接口定义
  const API = {
    connect: (config) => fetch('http://localhost:5000/api/connect', { 
      method: 'POST', 
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(config)
    }).then(r => r.json()),
    startMeasure: () => fetch('http://localhost:5000/api/start', { method: 'POST' }).then(r => r.json()),
    stopMeasure: () => fetch('http://localhost:5000/api/stop', { method: 'POST' }).then(r => r.json()),
    emergencyStop: () => fetch('http://localhost:5000/api/emergency', { method: 'POST' }).then(r => r.json()),
    resetSystem: () => fetch('http://localhost:5000/api/reset', { method: 'POST' }).then(r => r.json()),
    getStatus: () => fetch('http://localhost:5000/api/status').then(r => r.json()),
    getData: () => fetch('http://localhost:5000/api/data').then(r => r.json()),
    exportData: () => fetch('http://localhost:5000/api/export', { method: 'POST' })
  };

  // 页面状态管理
  let chart = null;
  let measurementInterval = null;
  let isMeasuring = false;
  const dataBuffer = {
    angles: [],
    distances: []
  };

  // 初始化图表
  function initChart() {
    const ctx = document.getElementById('data-chart').getContext('2d');
    chart = new Chart(ctx, {
      type: 'line',
      data: {
        datasets: [{
          label: '距离 (mm)',
          data: [],
          borderColor: '#3b82f6',
          backgroundColor: 'rgba(59, 130, 246, 0.1)',
          borderWidth: 2,
          pointRadius: 2,
          pointHoverRadius: 5,
          fill: true,
          tension: 0.3
        }]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
          legend: {
            display: false
          },
          tooltip: {
            mode: 'index',
            intersect: false,
            backgroundColor: 'rgba(0,0,0,0.8)',
            titleColor: '#fff',
            bodyColor: '#fff'
          }
        },
        scales: {
          x: {
            display: true,
            title: {
              display: true,
              text: '角度 (°)',
              color: '#6b7280',
              font: { size: 12 }
            },
            ticks: { color: '#6b7280' },
            grid: { color: 'rgba(0,0,0,0.05)', drawBorder: false }
          },
          y: {
            display: true,
            title: {
              display: true,
              text: '距离 (mm)',
              color: '#6b7280',
              font: { size: 12 }
            },
            ticks: { color: '#6b7280' },
            grid: { color: 'rgba(0,0,0,0.05)', drawBorder: false }
          }
        },
        interaction: {
          mode: 'nearest',
          axis: 'x',
          intersect: false
        }
      }
    });
  }

  // 更新图表
  function updateChart(angle, distance) {
    if (!chart) return;

    const dataset = chart.data.datasets[0];
    // 避免添加重复的角度数据点
    const lastPoint = dataset.data[dataset.data.length - 1];
    if (!lastPoint || Math.abs(lastPoint.x - angle) > 0.1) {
      dataset.data.push({ x: angle, y: distance });
      
      // 限制数据点数量，保持性能
      if (dataset.data.length > 2000) {
        dataset.data.shift();
      }
      
      chart.update();
      document.getElementById('chart-placeholder').classList.add('hidden');
    }
  }

  // 更新状态显示
  function updateStatus(status) {
    const statusEl = document.getElementById('system-status');
    const countEl = document.getElementById('data-count');
    const distanceEl = document.getElementById('real-distance');
    const angleEl = document.getElementById('current-angle');

    statusEl.textContent = status.system || '未知';
    countEl.textContent = status.dataCount || 0;
    distanceEl.textContent = status.distance !== undefined ? `${status.distance.toFixed(5)} mm` : '--.----- mm';
    angleEl.textContent = status.angle !== undefined ? `${status.angle.toFixed(4)} °` : '--.---- °';

    // 更新导出按钮状态
    const exportBtn = document.getElementById('btn-export');
    exportBtn.disabled = !(status.dataCount > 0);
    if (status.dataCount > 0) {
      exportBtn.classList.remove('opacity-70', 'cursor-not-allowed');
      exportBtn.title = '';
    } else {
      exportBtn.classList.add('opacity-70', 'cursor-not-allowed');
      exportBtn.title = '请先完成一次测量';
    }
  }

  // 实时数据轮询
  function startRealPolling() {
    clearInterval(measurementInterval);
    measurementInterval = setInterval(() => {
      API.getStatus().then(status => {
        updateStatus(status);
        
        if (status.system === '测量中' && status.angle !== null && status.distance !== null) {
          updateChart(status.angle, status.distance);
          
          if (!dataBuffer.angles.includes(status.angle)) {
            dataBuffer.angles.push(status.angle);
            dataBuffer.distances.push(status.distance);
          }
        }
      }).catch(err => {
        console.error('获取状态失败:', err);
      });
    }, 50);
  }

  // 事件监听器
  document.addEventListener('DOMContentLoaded', () => {
    initChart();
    
    // 连接设备
    const connectToDevices = () => {
      const port = document.getElementById('port').value;
      const baudrate = parseInt(document.getElementById('baudrate').value);
      const stepperCycles = parseFloat(document.getElementById('stepper-cycles').value);
      const sampleInterval = parseFloat(document.getElementById('sample-interval').value);
      
      API.connect({
        port,
        baudrate,
        stepper_cycles: stepperCycles,
        sample_interval: sampleInterval
      }).then(response => {
        if (response.status === 'success') {
          alert('设备连接成功，可以开始测量了！');
          startRealPolling();
        } else {
          alert(`连接失败: ${response.message}`);
        }
      }).catch(err => {
        alert('连接设备时发生错误: ' + err.message);
      });
    };

    // 打开设置模态框
    document.getElementById('btn-settings').addEventListener('click', () => {
      document.getElementById('settings-modal').classList.remove('hidden');
    });

    // 关闭模态框
    document.getElementById('close-modal').addEventListener('click', () => {
      document.getElementById('settings-modal').classList.add('hidden');
    });

    // 保存设置
    document.getElementById('settings-form').addEventListener('submit', (e) => {
      e.preventDefault();
      connectToDevices();
      document.getElementById('settings-modal').classList.add('hidden');
    });

    // 开始测量
    document.getElementById('btn-start').addEventListener('click', () => {
      // 先检查设备是否已连接
      API.getStatus().then(status => {
        if (status.system !== '已连接' && status.system !== '待机') {
          alert('请先通过“参数设置”完成设备连接！');
          return;
        }

        // 已连接则继续启动测量
        const startBtn = document.getElementById('btn-start');
        startBtn.disabled = true;
        startBtn.innerHTML = '<span class="ti ti-loader ti-spin mr-1"></span> 启动中...';
        
        API.startMeasure().then(response => {
          startBtn.disabled = false;
          startBtn.innerHTML = '<span class="ti ti-playstation-square ti-lg mb-1"></span> 开始测量';
          
          if (response.status === 'success') {
            isMeasuring = true;
          } else {
            alert(`操作失败: ${response.message}`);
          }
        }).catch(err => {
          startBtn.disabled = false;
          startBtn.innerHTML = '<span class="ti ti-playstation-square ti-lg mb-1"></span> 开始测量';
          alert('开始测量时发生错误: ' + err.message);
        });
      });
    });

    // 停止采集
    document.getElementById('btn-stop').addEventListener('click', () => {
      const stopBtn = document.getElementById('btn-stop');
      stopBtn.disabled = true;
      stopBtn.innerHTML = '<span class="ti ti-loader ti-spin mr-1"></span> 停止中...';
      
      API.stopMeasure().then(response => {
        stopBtn.disabled = false;
        stopBtn.innerHTML = '<span class="ti ti-square ti-lg mb-1"></span> 停止采集';
        
        if (response.status === 'success') {
          isMeasuring = false;
        } else {
          alert(`操作失败: ${response.message}`);
        }
      }).catch(err => {
        stopBtn.disabled = false;
        stopBtn.innerHTML = '<span class="ti ti-square ti-lg mb-1"></span> 停止采集';
        alert('停止采集时发生错误: ' + err.message);
      });
    });

    // 急停
    document.getElementById('btn-emergency').addEventListener('click', () => {
      if (confirm('确定要执行紧急停止吗？')) {
        const emergencyBtn = document.getElementById('btn-emergency');
        emergencyBtn.disabled = true;
        emergencyBtn.innerHTML = '<span class="ti ti-loader ti-spin mr-1"></span> 急停中...';
        
        API.emergencyStop().then(response => {
          emergencyBtn.disabled = false;
          emergencyBtn.innerHTML = '<span class="ti ti-alert-octagon ti-lg mb-1"></span> 急停';
          
          isMeasuring = false;
          if (response.status !== 'success') {
            alert(`急停失败: ${response.message}`);
          }
        }).catch(err => {
          emergencyBtn.disabled = false;
          emergencyBtn.innerHTML = '<span class="ti ti-alert-octagon ti-lg mb-1"></span> 急停';
          alert('执行急停时发生错误: ' + err.message);
        });
      }
    });

    // 复位
    document.getElementById('btn-reset').addEventListener('click', () => {
      const resetBtn = document.getElementById('btn-reset');
      resetBtn.disabled = true;
      resetBtn.innerHTML = '<span class="ti ti-loader ti-spin mr-1"></span> 复位中...';
      
      API.resetSystem().then(response => {
        resetBtn.disabled = false;
        resetBtn.innerHTML = '<span class="ti ti-refresh ti-lg mb-1"></span> 复位';
        
        if (response.status === 'success') {
          isMeasuring = false;
          dataBuffer.angles = [];
          dataBuffer.distances = [];
          if (chart) {
            chart.data.datasets[0].data = [];
            chart.update();
          }
          document.getElementById('chart-placeholder').classList.remove('hidden');
        } else {
          alert(`复位失败: ${response.message}`);
        }
      }).catch(err => {
        resetBtn.disabled = false;
        resetBtn.innerHTML = '<span class="ti ti-refresh ti-lg mb-1"></span> 复位';
        alert('执行复位时发生错误: ' + err.message);
      });
    });

    // 导出数据
    document.getElementById('btn-export').addEventListener('click', () => {
      API.exportData().then(response => {
        if (!response.ok) {
          throw new Error('导出失败');
        }
        return response.blob();
      }).then(blob => {
        const url = window.URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        a.download = `measurement_data_${new Date().toISOString().slice(0,19).replace(/:/g,'-')}.csv`;
        document.body.appendChild(a);
        a.click();
        window.URL.revokeObjectURL(url);
        document.body.removeChild(a);
      }).catch(err => {
        alert('导出数据失败: ' + err.message);
      });
    });
  });

  // 点击模态框外部关闭
  window.addEventListener('click', (e) => {
    const modal = document.getElementById('settings-modal');
    if (e.target === modal) {
      modal.classList.add('hidden');
    }
  });
</script>
</body>
</html>